import React from 'react';
import './index.scss'
import PageHeader from "@/components/PageHeader";
import {useSelector} from "react-redux";
import {StateType} from "@/store";
import HomeHeader from "@/views/Home/HomeHeader.tsx";
import {Button, Card, Flex} from "antd";
import ProjectCard from "@/views/Home/ProjectCard.tsx";
import Meta from "antd/es/card/Meta";
import tempPic from '@/assets/images/tempPic.jpg'

const Home: React.FC = () => {

  const user = useSelector((state: StateType) => state.pr.userInfo.user)

  return (
    <div>
      <PageHeader title="首页">
        <HomeHeader user={user}/>
      </PageHeader>

      <Flex>

        <div className="home-content-left">
          <Card title="精选项目" extra={<Button type="link">更多&nbsp;&gt;</Button>} style={{width: "100%"}}>
            <ProjectCard image="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" title="Jvyou-Node"
                         describe="橘柚的学习日常，分享个人笔记，个人心得以及学习日志。"/>
            <ProjectCard image="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" title="Jvyou-Node"
                         describe="橘柚的学习日常，分享个人笔记，个人心得以及学习日志。橘柚的学习日常，分享个人笔记，个人心得以及学习日志。橘柚的学习日常，分享个人笔记，个人心得以及学习日志。橘柚的学习日常，分享个人笔记，个人心得以及学习日志。橘柚的学习日常，分享个人笔记，个人心得以及学习日志。橘柚的学习日常，分享个人笔记，个人心得以及学习日志。"/>
            <ProjectCard image="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" title="Jvyou-Node"
                         describe="橘柚的学习日常，分享个人笔记，个人心得以及学习日志。"/>
            <ProjectCard image="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" title="Jvyou-Node"
                         describe="橘柚的学习日常，分享个人笔记，个人心得以及学习日志。"/>
            <ProjectCard image="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" title="Jvyou-Node"
                         describe="橘柚的学习日常，分享个人笔记，个人心得以及学习日志。"/>
            <ProjectCard image="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" title="Jvyou-Node"
                         describe="橘柚的学习日常，分享个人笔记，个人心得以及学习日志。"/>
          </Card>
        </div>
        <div className="home-content-right">
          <Card hoverable cover={<img alt="example" src={tempPic}/>}>
            <Meta title="小小橘柚" description="https://gitee.com/jvyou"/>
          </Card>
        </div>

      </Flex>

    </div>
  );
};

export default Home;